<template>
    <!--图标样式-->
    <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

    <!--布局框架-->
    <link rel="stylesheet" type="text/css" href="/assets/css/util.css">

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="/assets/css/main.css">

    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="register" class="login100-form validate-form">
                    <!-- logo -->
                    <div class="login100-form-avatar" style='margin-bottom:65px;'>
                        <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <!-- 邮箱 -->
                    <div class="wrap-input100 validate-input m-b-10">
                        <van-field
                        v-model="email"
                        name="email"
                        placeholder="请输入注册邮箱"
                        left-icon="envelop-o"
                        :rules="rules.email"
                        />
                    </div>


                    <!-- 密码 -->
                  <div class="wrap-input100 validate-input m-b-10">
                      <van-field 
                        v-model="password"
                        name="password"
                        type="password"
                        placeholder="请输入密码"
                        left-icon="bag-o"
                        :rules="rules.password"
                      />
                  </div>

                    
                  <!-- 注册按钮 -->
                  <div class="container-login100-form-btn p-t-10">
                      <van-button native-type="submit" round block color="#333333">注 册</van-button>
                  </div>

                  <div class="text-center w-full p-t-25 p-b-230">
                      <a href="index.html#" class="txt1">忘记密码？</a>
                  </div>

                  <div class="text-center w-full">
                    <router-link class="txt1" to="/user/base/login">
                      立即登录
                      <i class="fa fa-long-arrow-right"></i>
                    </router-link>
                  </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name:'BaseRegister',
    data(){
      return{
        email:'',
        password:'',
        //效验规则
        rules:{
          email:[
            {
              required: true,
              message: '请输入注册邮箱'
            },
            {
              message: '邮箱输入的格式有误',
              validator(value)
              {
                  //正则表达式
                  var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")

                  //test方法返回true 和 false 
                  return reg.test(value)
              }
            }
          ],
          password:[
            {
              required: true,
              message: '请输入密码'
            },
          ],
        }
      }
    },
    // 表单提交的方法
    methods: {
    //表单提交的方法
      async register(form)
      {
        
        //同步操作  await == 等待 必须等这条语句结束后才能往下走
        var result = await this.$api.register(form)

        if(result.code == 1)
        {
          this.$notify({
            type:'success',
            message:result.msg,
            duration: 2000,
            onClose:() => {
              //当他消失的时候跳转
              this.$router.push('/user/base/login')
            }
          })
        }else
        {
          //提示信息
          this.$notify({
            message:result.msg,
            type: 'danger'
          })
        }
      }
    }
  }
</script>